<template>
    <div style="position: relative">
      <span class="bdg" :style="reStyle">{{word}}</span>
      <slot></slot>
    </div>
</template>

<script>
    export default {
      name: "right-badge",
      data(){
        return{
        }
      },
      props:{
        word:{
          default:function(){
            return '进行中'
          },
          type:String
        },
        color:{
          default:function(){
            return '#21D779'
          },
          type:String
        },
        right:{
          default:function(){
            return '-50px'
          },
          type:String
        },
        top:{
          default:function(){
            return '-10px'
          },
          type:String
        },
      },
      computed:{
        reStyle(){
            return `background-color: ${this.color};\n` +
              `    right: ${this.right};\n` +
              `    top: ${this.top};\n`
        }
      }
    }
</script>

<style lang="scss" scoped>
  .bdg{
    position: absolute;
    text-align: center;
    color:white;
    font-size: 12px;
    padding: 1px;
    width:100px;
    height:20px;
    transform: rotate(45deg);
  }

</style>
